import React, { Component } from 'react';
import {connect} from 'react-redux';
import {View, Audio} from '@tarojs/components';
import {AtIcon} from 'taro-ui';
import {GetRequest} from "../../../../utils/tools";
import {http} from "../../../../utils/http";
import {TARO_ENV} from "../../../../constants/api";
import classnames from "classnames";
import "./index.scss";

export default class AudioPlay extends Component {
	render() {
		const { visible, scenicInfo, playProgress } = this.props;

		return (
			<View className={classnames("audio-play-page", {"active": visible})}>
				<AtIcon
					value='close-circle'
					size='20'
					color='#999'
					className="close-btn"
					onClick={this.props.closeAudioPlay}
				/>
				{
					playProgress &&
					<View className="audio-diy">
						<View className="audio-btn">
							<AtIcon
								value={!playProgress ? "play" : playProgress.playStatus}
								size='22'
								color='#333'
								onClick={() => this.props.controlPlay(playProgress.playStatus)}
							/>
						</View>
						<View className="audio-infos">
							<View className="ap-top">
								<View className="left">{scenicInfo.name}</View>
								<View className="right">{scenicInfo.distance}km</View>
							</View>
							<View className="audio-progress-bar">
								<View className="progress-out">
									<View className="progress-inner" style={{width: playProgress.progress}}></View>
								</View>
								<View className="audio-duration">{playProgress.audioDuration}</View>
							</View>
						</View>
					</View>
				}
				{/* 避免无条件加载Android需要点击两次才能播放 */}
				{
					scenicInfo && scenicInfo.audio_url &&
					<audio
						src={scenicInfo.audio_url}
						autoplay
						controls="controls"
						controlsList="nodownload"
						id='audioPlay'
						style={{position: "absolute", bottom: "-10vh"}}
					/>
				}
			</View>
		)
	}
}
